<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function imgChange(){
            //弹出消息框
            // alert("变化");
            //在控制台打印
            // console.log("变化");
            //得到下拉框对象
            var selectObj = document.getElementById("imgSelect");
            //得到图片对象
            var imgObj = document.getElementById("faceImg");
            //得到选中项的value值
            // alert(selectObj.value);
            if(selectObj.value == "1"){
                imgObj.src = "img/3.jpg";
            }
            else if(selectObj.value == "2"){
                imgObj.src = "img/6.jpg";
            }
            else if(selectObj.value == "3"){
                imgObj.src = "img/9.jpg";
            }
            else if(selectObj.value == "4"){
                    imgObj.src = "img/10.jpg";
            }
        }

        //函数形参只需要定义变量名就可以了
        function updateImg(selectObj){
            document.getElementById("faceImg").src = selectObj.value;
        }
    </script>
</head>
<body>
    <p>段落 </p>
    <img src="img/3.jpg" width="300" height="200" id="faceImg"><br>
    <!--元素内容发生变化的事件-->
    <select onchange="updateImg(this)" id="imgSelect">
      <option value="img/3.jpg">春香</option>
      <option value="img/6.jpg">夏香</option>
      <option value="img/9.jpg">秋香</option>
      <option value="img/10.jpg">冬香</option>
    </select>
</body>
</html>